<template>  
  <div id="app">  
    <h1>TodoList App</h1>  
    <todo-form @add="addTodo"></todo-form>  
    <todo-list :todos="todos" @update="todos = $event"></todo-list>  
  </div>  
</template>  
  
<script>  
import TodoForm from './components/TodoForm.vue';  
import TodoList from './components/TodoList.vue';  
  
export default {  
  components: {  
    TodoForm,  
    TodoList  
  },  
  data() {  
    return {  
      todos: []  
    };  
  },  
  methods: {  
    addTodo(todo) {  
      this.todos.push(todo);  
    }  
  }  
};  
</script>